<template>
  <div style="" class="overflowY">
    <div slot="header" class="clearfix tree-title">
      <el-button type="primary" size="mini" class="size" @click="toAddRecord"><i class="el-icon-setting el-icon--left"></i>配置流程</el-button>
    </div>

    <div style="position: relative;border: 1px solid #ccc;padding:0px 0px 54px 0px;margin:0px 0px 0px 0px;position: relative;">
      <el-table
        ref="singleTable"
        :data="tableData"
        tooltip-effect="dark"
        @row-contextmenu="rowContextmenu"
        @cell-dblclick="cellClick"
        @row-click="rowClick"
        @sort-change="sortChange"
        highlight-current-row
        height="340"
        style="width: 100%">
        <el-table-column
          width="50"
          align="center"
          label="序号">
          <template slot-scope="scope">
            <span>{{scope.$index + (pagingArgs.currentPageNo - 1) * 10 + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="200"
          prop="proc_procName"
          align="left"
          sortable="custom"
          :show-overflow-tooltip="true"
          label="流程名称">
        </el-table-column>
        <el-table-column
          width="120"
          prop="bizCateName"
          align="center"
          sortable="custom"
          :show-overflow-tooltip="true"
          label="流程分类">
        </el-table-column>
        <el-table-column
          width="100"
          prop="status"
          align="center"
          sortable="custom"
          :show-overflow-tooltip="true"
          :formatter="statusFormat"
          label="有效状态">
        </el-table-column>
        <el-table-column
          width="260"
          prop="proc_procId"
          align="left"
          :show-overflow-tooltip="true"
          label="流程ID">
        </el-table-column>
        <el-table-column
          width="120"
          prop="busiTypeName"
          align="center"
          sortable="custom"
          label="业务类型">
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          width="110"
          label="操作">
          <template slot-scope="scope">
            <div class="tableBtnBox">
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <el-button class="buttonSize" type="danger" size="mini" @click="deleteRecord(scope.row)" icon="el-icon-delete" circle></el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.status===1" class="item" effect="dark" content="启用" placement="top">
                <el-button class="buttonSize" type="success" size="mini" @click="openRecord(scope.row)" icon="el-icon-circle-check" circle></el-button>
              </el-tooltip>
              <el-tooltip v-if="scope.row.status===0" class="item" effect="dark" content="禁用" placement="top">
                <el-button class="buttonSize" type="warning" size="mini" @click="closeRecord(scope.row)" icon="el-icon-circle-close" circle></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="配置审核按钮" placement="top">
                <el-button class="buttonSize" type="primary" size="mini" @click="toButtonConfig(scope.row)" icon="el-icon-setting" circle></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="position: absolute;bottom:0;left: 10px;">
        <paging :size-change="pageSizeChange"
                :current-change="pagingQuery"
                :page-sizes="pageSizes"
                :total-num="pagingArgs.totalCount">
        </paging>
      </div>
    </div>
    <el-dialog title="流程配置" :visible.sync="busiTypeDialog.isDisplay" :close-on-click-modal="false" :destroy-on-close="true"
               v-if="busiTypeDialog.isDisplay" top="30px" width="65%" custom-class="myDialog">
      <busi-type-process-all @setDialogDisplay="setDialogDisplay" @listRefresh="listRefresh" :busiTypeDialog="busiTypeDialog" :dialogRefreshProp="dialogRefreshProp"></busi-type-process-all>
    </el-dialog>

    <el-dialog title="节点按钮配置" :visible.sync="actButtonConfigIsDisplay" :close-on-click-modal="false" :destroy-on-close="true"
               v-if="actButtonConfigIsDisplay" top="30px" width="65%" custom-class="myDialog">
      <busi-type-process-act-button :componentArgs="actButtonConfigArgs"></busi-type-process-act-button>
    </el-dialog>
  </div>
</template>

<script>
import { busiTypeProcessAll, busiTypeProcessActButton} from '@/views/workFlowManage/busiWorkFlowConfig/components'
import paging from '@/components/demoAssembly/paging' // 分页

export default {
  data() {
    return {
      pageSizes: [10, 20, 30, 40],
      // 分页参数
      pagingArgs: {
        currentPageNo: 1,
        totalCount: 0
      },
      tableData: [], // 列表数据
      queryArgs: {
        sort: [
          {
            property: 'proc_procName',
            direction: 'DESC'
          }
        ],
        rowBounds: {
          offset: 0,
          limit: 10
        },
        busiTypeId: '',
        orgId: ''
      }, // 查询参数
      dialogRefreshProp: '',
      busiTypeDialog: {
        isDisplay: false,
        busiTypeId: '',
        orgId: ''
      },
      actButtonConfigIsDisplay: false,
      actButtonConfigArgs: {}
    }
  },
  props: ['busiTypeId', 'orgId'],
  watch: {
    busiTypeId() { // 普通的watch监听通的watch监听
      this.fetchData()
    },
    orgId() { // 普通的watch监听通的watch监听
      this.fetchData()
    }
  },
  computed: {

  },
  filters: {

  },
  components: {
    paging,
    busiTypeProcessAll,
    busiTypeProcessActButton
  },
  /**
   * 组件创建完成后，查询列表数据
   */
  created() {

  },
  mounted() {
    this.fetchData()
  },
  methods: {
    rowClick() {
      // 行单击事件
    },
    cellClick(row, column, cell, event) {
      // 列单击事件
    },
    rowContextmenu(row, column, e) {
      // 右键菜单
      window.event.returnValue = false
    },
    pageSizeChange(val) {
      this.queryArgs.rowBounds.limit = val
      this.queryArgs.rowBounds.offset = 0
      this.pagingArgs.currentPageNo = 1
      this.fetchData()
    },
    sortChange(col) {
      //
      if (col.prop) {
        let tempDirection = 'ASC'
        if (col.order === 'descending') {
          tempDirection = 'DESC'
        }
        const sort = {
          property: col.prop,
          direction: tempDirection
        }
        this.queryArgs.sort = []
        this.queryArgs.sort.push(sort)
        this.fetchData()
      }
    },
    pagingQuery(val) { // 分页
      this.queryArgs.rowBounds.offset = (val - 1) * 10
      this.pagingArgs.currentPageNo = val
      this.fetchData()
    },
    buildQueryConditions() {
      let tempQueryCondition = []
      return tempQueryCondition
    },
    fetchData() { // 获取内容
      this.queryArgs.busiTypeId = this.busiTypeId
      this.queryArgs.orgId = this.orgId
      this.queryArgs.condition = this.buildQueryConditions()
      this.$store
        .dispatch('WfBusiTypeProcessSelect', this.queryArgs)
        .then(res => {
          this.tableData = res.data.records
          this.pagingArgs.totalCount = res.data.count
        })
        .catch(() => {

        })
    },
    statusFormat(row, column, cellValue, index) {
      let status = ''
      if (row.status === 0) {
        status = '有效'
      } else if (row.status === 1) {
        status = '无效'
      }
      return status
    },
    toAddRecord(record) {
      if (this.busiTypeId) {
        //
        this.dialogRefreshProp = new Date().getTime()
        this.busiTypeDialog.isDisplay = true
        this.busiTypeDialog.busiTypeId = this.busiTypeId
        this.busiTypeDialog.orgId = this.orgId
      } else {
        this.$message({
          type: 'warning',
          message: '请选择业务流程！'
        })
      }
    },
    deleteRecord(record) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        let args = []
        let deleteRecord = {}
        deleteRecord.busiTypeProcId = record.busiTypeProcId
        args.push(deleteRecord)
        this.$store.dispatch('WfBusiTypeProcessDelete', args).then(res => {
          this.fetchData()
          this.loading = false
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
        }).catch((err) => {
          console.log(err)
          this.$message({
            type: 'warning',
            message: '删除异常！'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    toButtonConfig(record) {
      this.actButtonConfigArgs.busiTypeProcId = record.busiTypeProcId
      this.actButtonConfigArgs.procId = record.procId
      this.actButtonConfigArgs.busiTypeId = record.busiTypeId
      this.actButtonConfigIsDisplay = true
    },
    openRecord(record) {
      //
      this.loading = true
      let args = {}
      args.busiTypeProcId = record.busiTypeProcId
      args.status = 0
      this.$store.dispatch('WfBusiTypeProcessUpdateById', args).then(res => {
        this.fetchData()
        this.loading = false
        if (res.success) {
          this.$message({
            type: 'success',
            message: '启用成功！'
          })
        } else {
          this.$message({
            type: 'warning',
            message: '启用失败！' + res.message
          })
        }
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'danger',
          message: '启用异常！'
        })
      })
    },
    closeRecord(record) {
      //
      this.loading = true
      let args = {}
      args.busiTypeProcId = record.busiTypeProcId
      args.status = 1
      this.$store.dispatch('WfBusiTypeProcessUpdateById', args).then(res => {
        this.fetchData()
        this.loading = false
        if (res.success) {
          this.$message({
            type: 'success',
            message: '禁用成功！'
          })
        } else {
          this.$message({
            type: 'warning',
            message: '禁用失败！' + res.message
          })
        }
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'danger',
          message: '禁用异常！'
        })
      })
    },
    setDialogDisplay() {
      this.busiTypeDialog.isDisplay = false
    },
    listRefresh() {
      this.fetchData()
      this.busiTypeDialog.isDisplay = false
    }
  }
}
</script>
<style scoped>
  .tree-title{
    font-size: 16px;
    padding:10px 10px 10px 20px;
    border-bottom: 1px solid #ccc;
  }
  .size{
    padding:4px;
  }
  .tree-detail{
    padding: 10px 0 80px 15px;
  }
  .notSize .el-table__empty-text{
    display: none;
  }
  .tableBtnBox >>> .el-button.is-circle {
    padding: 4px !important;
  }
  .tableBtnBox >>> .el-button+.el-button {
    margin-left: 5px;
  }

</style>

